<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="requiredMsg" value="%{getText('error.required')}" />
<s:set var="updateSuccessfulMsg"
  value="%{getText('info.update.successful', {getText('field.new.password')})}" />
<script type="text/javascript">
  function focusOnFirstElement() {
    setTimeout(function() {
      $('#change-password-dialog-form :input:visible:enabled:first').focus();
    },10);
  }

  function resetForm() {
    $('#change-password-dialog-form :input:not(:hidden)').val('');
    focusOnFirstElement();
  }
  
  $(function() {
    $('#changePasswordMsg').tooltip({
      tooltipClass : "ui-state-highlight"
    });
    $("#change-password-dialog").dialog(
        {
          height : 300,
          width : 550,
          modal : true,
          buttons : {
            '<s:property value="%{getText(\"button.ok\")}" />' : function() {
              var bValid = $('#change-password-dialog-form').valid();
              if (bValid) {
                var params = {};
                params['currentPassword'] = $('#change-password-dialog-form #currentPassword')
                    .val();
                params['newPassword'] = $('#change-password-dialog-form #newPassword').val();
                params['confirmedNewPassword'] = $(
                    '#change-password-dialog-form #confirmedNewPassword').val();
                jQuery.ajax({
                  url : '${pageContext.request.contextPath}/userProfile/changePassword.action',
                  type : 'POST',
                  dataType : 'json',
                  cache : false,
                  data : params,
                  success : function(data) {
                    var msg = '';
                    var status = data.status;
                    if (status == 'SUCCESS') {
                      msg = '<s:property value="#updateSuccessfulMsg"/>';
                      resetForm();
                    } else if (status == 'ERROR') {
                      if (data.errors) {
                        var errors = data.errors;
                        for ( var i = 0; i < errors.length; i++) {
                          msg += errors[i];
                          if (i < errors.length - 1) {
                            msg += ', ';
                          }
                        }
                      }
                    }
                    $('#changePasswordMsg').attr('title',msg).tooltip('open');
                    setTimeout(function() {
                      $('#changePasswordMsg').tooltip("close").attr("title","");
                    },1500);
                  }
                });
              }
            },
            '<s:property value="%{getText(\"button.cancel\")}" />' : function() {
              $(this).remove();
            }
          },
          close : function() {
            $(this).remove();
          }
        });
    $('#change-password-dialog').wrap('<form id="change-password-dialog-form">');
    $('#changePasswordAccordion > div > table td.LABEL').css({
      'width' : '135px'
    });
    $.validator.setDefaults({
      errorClass : 'ui-state-error'
    });
    $('#change-password-dialog-form').validate(
        {
          rules : {
            'currentPassword' : {
              required : true
            },
            'newPassword' : {
              required : true,
            },
            'confirmedNewPassword' : {
              required : true,
              equalTo : '#newPassword'
            }
          },
          messages : {
            'currentPassword' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.current.password\")}" />')
            },
            'newPassword' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.new.password\")}" />')
            },
            'confirmedNewPassword' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.confirmed.new.password\")}" />'),
              equalTo : jQuery
                  .format('<s:property value="%{getText(\"error.user.password.mismatch\")}" />')
            }
          }
        });
    focusOnFirstElement();
  });
</script>
<div id="change-password-dialog" title='<s:property value="getText('title.change.password')"/>'>
  <div id="changePasswordMsg"></div>
  <div id="changePasswordAccordion">
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="currentPassword" class="mandatory"><s:property
                value="getText('field.current.password')" /></label></td>
          <td><input type="password" id="currentPassword" name="currentPassword" /></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="newPassword" class="mandatory"><s:property
                value="getText('field.new.password')" /></label>
          <td><input type="password" id="newPassword" name="newPassword" /></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="confirmedNewPassword" class="mandatory"><s:property
                value="getText('field.confirmed.new.password')" /></label>
          <td><input type="password" id="confirmedNewPassword" name="confirmedNewPassword" /></td>
        </tr>
      </table>
    </div>
  </div>
</div>